<template>
    <div class="template">
        <div class="search">
            <el-input @keyup.enter.native="goSearch" class="div" placeholder="请输入内容" v-model="search">
                <template slot="prepend">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{
                                cateList.length > 0
                                    ? cateList[searchCateIndex].name
                                    : "全部"
                            }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in cateList" :key="index" :command="index"
                                :disabled="searchCateIndex == index">{{ item.name }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
                <template slot="append">
                    <div @click="goSearch">
                        搜索<i class="el-icon-search"></i>
                    </div>
                </template>
            </el-input>
            <img class="search-bj" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Template_header_bj.png"
                alt="" />
        </div>

        <div class="intro">
            <el-image :src="'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/mbzq-abstract-bj.png'" fit="cover"
                class="intro-img" alt="模版专区图片"></el-image>
            <div class="txt">
                {{ modelarea }}
            </div>
        </div>

        <div v-show="!isSearch">
            <div class="recommend">
                <nuxt-link v-for="(item, index) in recommendList" :key="index"
                    :to="`/templates/modelarea/${item.tid}/${item.id}/1`">
                    <img class="recommend-item" :src="item.pic" :alt="item.name" />
                </nuxt-link>
            </div>

            <div class="recommend-block">
                <template v-for="(items, indexs) in cateList">
                    <div v-if="indexs != 0" :key="indexs" class="recommend-block-item"
                        @mouseenter="handleMouseEnter(items, indexs)" @mouseleave="handleMouseLeave(items)">
                        <div class="recommend-block-card">
                            <nuxt-link class="recommend-block-title" :to="getRecommendTo(items)">
                                {{ items.name }}
                            </nuxt-link>
                            <div class="recommend-block-list">
                                <template v-if="items.second.length > 4">
                                    <nuxt-link v-for="item in 4" :key="item" :to="`/templates/modelarea/${items.id
                                        }/${items.second[item - 1].id}/1`">
                                        {{ items.second[item - 1].name }}
                                    </nuxt-link>
                                </template>
                                <template v-else>
                                    <nuxt-link v-for="item in items.second" :key="item.id"
                                        :to="`/templates/modelarea/${items.id}/${item.id}/1`">{{ item.name
                                        }}</nuxt-link>
                                </template>
                            </div>
                        </div>
                        <div v-if="items.second.length > 4" class="recommend-block-stick" :ref="'stick' + items.id">
                            <div class="recommend-block-card">
                                <nuxt-link class="recommend-block-title" :to="getRecommendTo(items)">
                                    {{ items.name }}
                                </nuxt-link>
                                <div class="recommend-block-list">
                                    <nuxt-link v-for="item in items.second" :key="item.id" :style="{
                                        width:
                                            item.name.length > 7
                                                ? '100%'
                                                : '50%',
                                    }" :to="`/templates/modelarea/${items.id}/${item.id}/1`">{{ item.name }}
                                    </nuxt-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- <div class="recommend-tabs">
                <div class="tabs-title">热门推荐</div>
                <div class="tab tab-active">日榜</div>
                <div class="tab">周榜</div>
            </div> -->
        </div>
        <div v-if="isSearch" class="data-list">
            <nuxt-link v-for="(item, index) in modelList" :key="index" :to="'/templates/' + item.id + '.html'"
                target="_blank">
                <model-item class="modelItem" :item="item"></model-item>
            </nuxt-link>
        </div>

        <div class="sort" v-else>
            <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList1.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params1)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <div v-for="(item, index) in this.tabList1.second" :key="index">
                            <div v-if="index < 8 && tabList1.second.length > 1" :class="[
                                active1 == index ? 'active' : '',
                                'sort_tag',
                            ]" @click="chooseTag(index, 1, item)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="csList.length > 0" class="data-list">
                        <nuxt-link v-for="(item, index) in csList" :key="index" :to="'/templates/' + item.id + '.html'"
                            target="_blank">
                            <model-item class="modelItem" :item="item"></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div>
            <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList2.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params2)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <template v-for="(item, index) in tabList2.second">
                            <div v-if="index < 8 && tabList2.second.length > 1" :class="[
                                active2 == index ? 'active' : '',
                                'sort_tag',
                            ]" :key="index" @click="chooseTag(index, 2, item)">
                                {{ item.name }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="gzList.length > 0" class="data-list">
                        <nuxt-link v-for="(item, index) in gzList" :key="index" :to="'/templates/' + item.id + '.html'"
                            target="_blank">
                            <model-item class="modelItem" :item="item"></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div>
            <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList3.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params3)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <template v-for="(item, index) in tabList3.second">
                            <div v-if="index < 8 && tabList3.second.length > 1" :class="[
                                active3 == index ? 'active' : '',
                                'sort_tag',
                            ]" :key="index" @click="chooseTag(index, 3, item)">
                                {{ item.name }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="htList.length > 0" class="data-list">
                        <nuxt-link v-for="(item, index) in htList" :key="index" :to="'/templates/' + item.id + '.html'"
                            target="_blank">
                            <model-item class="modelItem" :item="item"></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div>
            <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList4.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params4)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <template v-for="(item, index) in tabList4.second">
                            <div v-if="index < 8 && tabList4.second.length > 1" :class="[
                                active4 == index ? 'active' : '',
                                'sort_tag',
                            ]" :key="index" @click="chooseTag(index, 4, item)">
                                {{ item.name }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="ghList.length > 0" class="data-list">
                        <nuxt-link v-for="(item, index) in ghList" :key="index" :to="'/templates/' + item.id + '.html'"
                            target="_blank">
                            <model-item class="modelItem" :item="item"></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div>
            <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList5.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params5)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <template v-for="(item, index) in tabList5.second">
                            <div v-if="index < 8 && tabList5.second.length > 1" :class="[
                                active5 == index ? 'active' : '',
                                'sort_tag',
                            ]" :key="index" @click="chooseTag(index, 5, item)">
                                {{ item.name }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="byjList.length > 0" class="data-list">
                        <nuxt-link v-for="(item, index) in byjList" :key="index" :to="'/templates/' + item.id + '.html'"
                            target="_blank">
                            <model-item class="modelItem" :item="item"></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div>
            <!-- <div class="sort_item">
                <div class="sort_top">
                    <div class="sort_title">{{ tabList6.name }}</div>
                    <div class="sort_more" @click="goModelArea1(params6)">
                        更多
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="sort_middle">
                    <div class="subheading">
                        <template v-for="(item, index) in tabList6.second">
                            <div
                                v-if="index < 8"
                                :class="[
                                    active6 == index ? 'active' : '',
                                    'sort_tag',
                                ]"
                                :key="index"
                                @click="chooseTag(index, 6, item)"
                            >
                                {{ item.name }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sort_bottom">
                    <div v-if="bgList.length > 0" class="data-list">
                        <nuxt-link
                            v-for="(item, index) in bgList"
                            :key="index"
                            :to="'/templates/' + item.id + '.html'"
                            target="_blank"
                        >
                            <model-item
                                class="modelItem"
                                :item="item"
                            ></model-item>
                        </nuxt-link>
                    </div>
                </div>
            </div> -->
        </div>

        <div v-if="modelList.length > 0 && isSearch" class="page">
            <el-pagination background layout="prev, pager, next" :current-page="page" :page-size="limit" :total="count"
                @current-change="changePage">
            </el-pagination>
        </div>

        <div v-show="isSearch">
            <div v-if="modelList.length == 0" class="nodata">
                <el-empty :image-size="330">
                    <div slot="description" class="description">
                        没有搜到合适的作品？换个关键词试试~或
                        <span class="description-link" @click="fankui">
                            提交素材建议
                        </span>
                    </div>
                </el-empty>
            </div>
        </div>

        <el-dialog title="感谢您留下宝贵的建议" :visible.sync="dialogVisible" width="340px">
            <el-input type="textarea" :rows="4" placeholder="请在此输入您所需的模板，如被采纳有计划获得VIP哦！" v-model="fankuiForm.textarea">
            </el-input>
            <div class="form-item">
                请选择素材分类:
                <el-select class="select" v-model="fankuiForm.type" placeholder="请选择">
                    <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="form-item">
                <el-input v-model="fankuiForm.phone" placeholder="请输入您的联系方式"></el-input>
            </div>
            <div class="form-item" style="justify-content: center">
                <el-button type="primary" @click="submitFankui">提交</el-button>
            </div>
        </el-dialog>

        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
        </no-ssr>
    </div>
</template>

<script>
import {
    getModelCate,
    getDrgoodsShowpic,
    getModelList,
    add_suggestion,
} from "@/assets/api/modelAreaApi";
import { getanalysedata } from "@/assets/api/indexApi.js";

import { goTopSmooth } from "@/assets/utils/utils";
import { mapMutations } from "vuex";

import { mapState } from "vuex";

import modelItem from "@/components/modelArea/modelItem";

import { modelarea } from "@/assets/json/introduce.json";


import dynamicPopUps from "@/components/index/dynamicPopUps.vue";

export default {
    name: "modelarea",
    async asyncData({ params }) {
        let data = {
            cateList: [],
            recommendList: [],
            tabList1: {},
            tabList2: {},
            tabList3: {},
            tabList4: {},
            tabList5: {},
            tabList6: {},
            params1: {},
            params2: {},
            params3: {},
            params4: {},
            params5: {},
            params6: {},
            csList: [],
            gzList: [],
            htList: [],
            ghList: [],
            byjList: [],
            bgList: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/templates",
                images: [""],
                title: "小竹财税模板专区-财税模板下载-【小竹财税平台】",
                description:
                    "小竹财税模板专区为您提供合同范本、财税表格、办公常用表格、财税模板下载等模板，时时更新来满足不同用户的需求。",
                pubDate: "",
                upDate: "",
            },
        };
        const res = await getDrgoodsShowpic({});
        if (res.code == 1) {
            data.recommendList = res.data;
        }

        const res1 = await getModelCate({});
        if (res1.code == 1) {
            data.cateList = res1.data.slice(0, 5);
            for (let i = 1; i <= 5; i++) {
                data["tabList" + i] = res1.data[i];
                data["params" + i] = {
                    tid: res1.data[i].id,
                    s_tid: res1.data[i].second[0].id,
                };


                const sortMap = {
                    1: "csList",
                    2: "gzList",
                    3: "htList",
                    4: "ghList",
                    5: "byjList",
                    6: "bgList",
                };
                const res = await getModelList({
                    page: 1,
                    pagesize: 4,
                    s_tid: data["tabList" + i].second[0].id,
                    tid: data["tabList" + i].id,
                });
                if (res.code == 1) {
                    data[sortMap[i]] = res.data.list;
                }
            }
        }

        data.jsonld.pubDate = data.jsonld.upDate = data.csList[0].createtime;
        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "小竹财税模板专区-财税模板下载-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税模板专区为您提供合同范本、财税表格、办公常用表格、财税模板下载等模板，时时更新来满足不同用户的需求。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "小竹财税模板专区,税模板专区,财税模板下载,合同范本,财税表格",
                },
            ],
        };
    },
    layout: "home",
    components: {
        modelItem,
        dynamicPopUps
    },
    props: {},
    data() {
        return {
            search: "",
            // cateList: [],
            searchCateIndex: 0,

            // recommendList: [],

            modelList: [],
            count: 0,
            limit: 16,
            page: 1,

            isSearch: false,

            getRecommendTo: function (item) { 
                return `/templates/modelarea/${item.id}/${item.second[0].id}/1`;
            },

            dialogVisible: false,
            fankuiForm: {
                textarea: "",
                type: "PPT模板",
                phone: "",
            },
            typeList: ["PPT模板", "WORD模板", "EXCEL模板"],
            active1: 0,
            active2: 0,
            active3: 0,
            active4: 0,
            active5: 0,
            active6: 0,
            // tabList1: {},
            // tabList2: {},
            // tabList3: {},
            // tabList4: {},
            // tabList5: {},
            // tabList6: {},
            // csList: [],
            // gzList: [],
            // htList: [],
            // ghList: [],
            // byjList: [],
            // bgList: [],
            // params1: {},
            // params2: {},
            // params3: {},
            // params4: {},
            // params5: {},
            // params6: {},

            modelarea: modelarea,
        };
    },

    created() { },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            menuList: (state) => state.menuList,
        }),

        ...mapState("modelArea", {
            recommendRes: (state) => state.recommendRes,
            cate: (state) => state.cate,
        }),
    },
    watch: {
        $route(to, from) {
            try {
                if (window) {
                    this.page = 1;
                    if (to.query.wd && to.query.tid) {
                        this.search = to.query.wd;
                        this.getSearchList(to.query.tid);
                    } else {
                        // 没有搜索内容
                        this.isSearch = false;
                    }
                }
            } catch (error) { }
        },
    },
    created() {
        // this.init();
    },
    mounted() {
        // console.log(this.recommendList)
        if (this.$route.query.wd && this.$route.query.tid) {
            this.search = this.$route.query.wd;
            this.getSearchList(this.$route.query.tid);
        } else {
            this.isSearch = false;
        }
        this.setmenuIndex("50");
        this.$nextTick(() => {
            goTopSmooth();
        });
        getanalysedata({
            m_id: 5,
            type: 1,
            code: "PG1",
            describe: "模板专区",
        });
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),
        // 初始化
        init() {
            // this.setmenuIndex("6");
            // 获取头部专栏列表
            this.getDrgoodsShowpic();
            // 获取分类
            this.getModelCate();
        },

        // 获取首页默认全部
        async getModelList(s_tid, tid, sort, is = false) {
            const sortMap = {
                1: "csList",
                2: "gzList",
                3: "htList",
                4: "ghList",
                5: "byjList",
                6: "bgList",
            };
            const res =
                this[sortMap[sort] + "x"] && is
                    ? this[sortMap[sort] + "x"]
                    : await getModelList({
                        page: 1,
                        pagesize: 4,
                        s_tid: s_tid,
                        tid: tid,
                    });
            if (res.code == 1) {
                if (sort in sortMap) {
                    this[sortMap[sort]] = res.data.list;
                }
                // this.modelList = res.data.list;
            }
        },

        // 获取分类
        async getModelCate() {
            const res = this.cate ? this.cate : await getModelCate({});
            if (res.code == 1) {
                this.cateList = res.data;
                for (let i = 1; i <= 6; i++) {
                    this["tabList" + i] = res.data[i];
                    this["params" + i] = {
                        tid: res.data[i].id,
                        s_tid: res.data[i].second[0].id,
                    };
                    this.getModelList(
                        this["tabList" + i].second[0].id,
                        this["tabList" + i].id,
                        i,
                        true
                    );
                }
            }
        },

        // 获取头部专栏列表
        async getDrgoodsShowpic() {
            const res = await getDrgoodsShowpic({});
            if (res.code == 1) {
                this.recommendList = res.data;
            }
        },

        // 电机下拉回调
        handleCommand(command) {
            this.searchCateIndex = command;
        },

        // 获取搜索内容
        async getSearchList(tid) {
            const res = await getModelList({
                keyword: this.search,
                page: this.page,
                pagesize: this.limit,
                tid: tid,
                type: "drygoods",
            });
            if (res.code == 1) {
                this.isSearch = true;
                this.modelList = res.data.list;
                this.count =
                    res.data.list.length > 0 ? res.data.list[0].datacount : 0;
                getanalysedata({
                    m_id: 5,
                    type: 1,
                    code: "PG2",
                    describe: "模板专区-搜索-" + this.search + "-" + this.page,
                });
            }
        },

        changePage(e) {
            this.page = e;
            this.getSearchList(this.$route.query.tid);
            goTopSmooth();
        },

        goSearch() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            if (this.search)
                this.$router.push({
                    path: "/templates",
                    query: {
                        wd: this.search,
                        tid: this.cateList[this.searchCateIndex].id,
                    },
                });
            else
                this.$router.push({
                    path: "/templates",
                });
        },

        handleMouseEnter(items, indexs) {
            if (items.second.length > 4) {
                let height =
                    120 + Math.ceil((items.second.length - 4) / 2) * 25;
                if (indexs == 3) {
                    height += 38;
                }
                height += "px";
                this.$refs["stick" + items.id][0].style.height = height;
            }
        },

        handleMouseLeave(items) {
            if (items.second.length > 4) {
                this.$refs["stick" + items.id][0].style.height = "";
            }
        },

        goModelArea1(item) {
            this.$router.push({
                path: `/templates/modelarea/${item.tid}/${item.s_tid}/1`,
            });
        },

        goRecommend(item) {
            this.$router.push({
                path: `/templates/modelarea/${item.tid}/${item.id}/1`,
            });
        },

        fankui() {
            this.dialogVisible = true;
        },

        // 提交反馈
        async submitFankui() {
            if (!this.fankuiForm.phone) {
                this.$message({
                    type: "warning",
                    message: "请输入电话号码",
                });
            }
            if (!this.fankuiForm.textarea) {
                this.$message({
                    type: "warning",
                    message: "请输入所需模板",
                });
            }
            let params = {
                type: this.fankuiForm.type,
                tel: this.fankuiForm.phone,
                content: this.fankuiForm.textarea,
            };
            const res = await add_suggestion(params);
            if (res.code == 1) {
                this.dialogVisible = false;
                this.$message({
                    type: "success",
                    message: "提交成功，感谢您的反馈",
                });
            }
        },

        //选择tag
        chooseTag(index, sort, item) {
            this["active" + sort] = index;
            this.getModelList(item.id, item.tid, sort);
            this["params" + sort].tid = item.tid;
            this["params" + sort].s_tid = item.id;
        },
    },
};
</script>
<style lang="scss" scoped>
.template {
    background-color: #fff;
}

.search {
    height: 182px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 30px;

    .search-bj {
        position: absolute;
        width: 100%;
        height: 182px;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .div {
        position: relative;
        z-index: 10;
        width: 700px;
        height: 60px;
        line-height: 60px;
        border: 2px solid #1c87f3;
        border-radius: 4px;
    }

    .el-dropdown-link {
        cursor: pointer;
    }

    ::v-deep .el-input__inner {
        border-width: 0;
    }

    ::v-deep .el-input-group__prepend {
        background-color: #fff;

        &::after {
            content: "";
            display: inline;
            border-right: 1px solid #c8c8c8;
            color: #fff;
            padding: 6px 0;
            position: relative;
            top: 0px;
            left: 8px;
        }
    }

    ::v-deep .el-input-group__append {
        font-size: 17px;
        font-weight: 500;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        color: #ffffff;
        background: #1c87f3;
        border-radius: 0;
        border-width: 0;
        cursor: pointer;

        &:hover {
            opacity: 0.9;
        }

        &:active {
            opacity: 1;
        }
    }

    ::v-deep .el-input__inner {
        height: 60px;
        line-height: 60px;
    }
}

.intro {
    width: 1200px;
    height: 117px;
    position: relative;
    margin: 0 auto;

    .intro-img {
        width: 100%;
        height: 100%;
    }

    .txt {
        width: 823px;
        position: absolute;
        top: 23px;
        left: 136px;
        font-size: 14px;
        font-weight: 400;
        color: #7b9bbf;
        line-height: 24px;
        letter-spacing: 1px;
    }
}

.recommend {
    width: 1200px;
    margin: 40px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .recommend-item {
        object-fit: cover;
        width: 287px;
        height: 150px;
        cursor: pointer;
    }
}

.recommend-block {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 134px;
    margin: 0 auto;
    margin-top: 32px;
    position: relative;
    width: 1200px;

    z-index: 1;
}

.recommend-block-item {
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    position: relative;

    &:nth-child(n + 2):after {
        background: rgba(0, 0, 0, 0.04);
        content: "";
        height: 76px;
        left: 0;
        margin-top: -38px;
        position: absolute;
        top: 50%;
        width: 1px;
    }

    &:hover {
        .recommend-block-stick {
            opacity: 1;
        }
    }

    .recommend-block-card {
        overflow: hidden;

        .recommend-block-title {
            display: block;
            box-sizing: border-box;
            color: #000;
            font-size: 18px;
            font-weight: 600;
            height: 24px;
            line-height: 24px;
            margin: 24px 20px 0;
            text-align: center;

            &:hover {
                color: #1c87f3;
            }
        }

        .recommend-block-list {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin: 8px 20px 20px;
            overflow: hidden;
            position: relative;

            a {
                color: #1f1f1f;
                cursor: pointer;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px;
                margin-bottom: 4px;
                // overflow: hidden;
                // text-align: center;
                // text-overflow: ellipsis;
                white-space: nowrap;
                width: 50%;

                &:hover {
                    color: #1c87f3;
                }
            }
        }
    }

    .recommend-block-stick {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.08);
        height: 134px;
        left: -1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        right: -1px;
        top: -1px;
        transition: all 0.5s cubic-bezier(0.61, 0, 0.12, 1);
        z-index: 1;
    }
}

.recommend-tabs {
    display: flex;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;

    .tabs-title {
        font-size: 26px;
        font-weight: 700;
        color: #333333;
        // margin-right: 31px;
    }

    .tab {
        width: 65px;
        height: 33px;
        background: #f7f7f7;
        border-radius: 4px;
        text-align: center;
        line-height: 33px;
        font-size: 16px;
        color: #333333;
        margin-right: 12px;
        cursor: pointer;
    }

    .tab-active {
        background: #ebf1ff;
        color: #1c87f3;
    }
}

.data-list {
    padding-top: 20px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.page {
    text-align: center;
    padding-bottom: 30px;
}

.nodata {
    padding: 50px 0;
}

.description {
    font-size: 16px;
    color: #9e9e9e;
}

.description-link {
    font-size: 16px;
    color: #1c87f3;
    cursor: pointer;
}

.form-item {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .select {
        margin-left: 12px;
        width: 137px;

        ::v-deep .el-input__inner {
            padding: 0 7px;
            height: 30px;
        }

        ::v-deep .el-input__icon {
            line-height: 30px;
        }
    }
}

// 新分类
.sort {
    width: 1200px;
    margin: 0 auto;
    margin-top: 46px;

    .sort_item {
        margin-bottom: 42px;

        &:last-child {
            margin-bottom: 0;
        }

        .sort_top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .sort_title {
                font-size: 26px;
                font-weight: 700;
                color: #333333;
                line-height: 34px;
            }

            .sort_more {
                cursor: pointer;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 18px;
            }
        }

        .sort_middle {
            margin-top: 27px;

            .subheading {
                display: flex;
                align-items: center;

                .sort_tag {
                    font-size: 16px;
                    font-weight: 400;
                    color: #666666;
                    padding: 5px 32px;
                    background: #f6f6f6;
                    border-radius: 4px 4px 4px 4px;
                    margin-right: 13px;
                    cursor: pointer;

                    // &:last-child {
                    //     margin-right: 0;
                    // }
                }

                .active {
                    background: #ebf1ff;
                    color: #1c87f3;
                }
            }
        }
    }
}

.el-icon-search {
    padding-left: 5px;
}
</style>
